<template>
  <div class="p-4 flex-1 overflow-hidden flex flex-col">
    <div>
      <div
        class="h-10 flex tems-center justify-center rounded text-sm text-gray-900 cursor-pointer"
      >
        <textarea
          style="resize:none;width: 400px;height:200px"
          v-model="mytext"
          placeholder="请输入文本"
        ></textarea>
      </div>

      <div style="background-color: #683CFD;margin-top:160px" @click="getVoice"></div>
    </div>
    <div class="slider-demo-block">
      <!-- top_K -->
      <el-row :gutter="24" style="margin-top:20px">
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" />
          <div class="centered-container">
            <p style="margin: 0;">top_K</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content ep-bg-purple" style="width: 100%;">
            <el-slider v-model="top_K" :min="1" :max="20" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content ep-bg-purple" style="width: 100%;">
            <el-input-number v-model="top_K" :min="1" :max="20" />
          </div>
        </el-col>
      </el-row>
      <!-- top_P -->
      <el-row :gutter="24" style="margin-top:20px">
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" />
          <div class="centered-container">
            <p style="margin: 0;">top_P</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content ep-bg-purple" style="width: 100%;">
            <el-slider v-model="top_P" :min="0.1" :max="0.9" :step="0.05" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content ep-bg-purple" style="width: 100%;">
            <el-input-number v-model="top_P" :min="0.1" :max="0.9" :step="0.05" />
          </div>
        </el-col>
      </el-row>
      <!-- temperature -->
      <el-row :gutter="24" style="margin-top:20px">
        <el-col :span="8">
          <div class="grid-content ep-bg-purple" />
          <div class="centered-container">
            <p style="margin: 0; margin-left: -10px;">temperature</p>
          </div>
        </el-col>
        <!-- <el-col :span="12">
      <div class="grid-content ep-bg-purple" style="width: 100%;" >
        <el-slider v-model="temperature" :min="0.00001" :max="1" :step="0.00001" />
      </div>
     
        </el-col>-->
        <el-col :span="16">
          <div class="grid-content ep-bg-purple" style="width: 100%;">
            <el-input-number v-model="temperature" :min="0.00001" :max="1" :step="0.00001" />
          </div>
        </el-col>
      </el-row>
      <!-- Audio Seed -->
      <el-row :gutter="24" style="margin-top:20px">
        <el-col :span="8">
          <div class="grid-content ep-bg-purple"></div>
          <div class="centered-container">
            <p style="margin: 0; margin-left: -15px;">
              <!-- 添加text-align属性 -->
              Audio Seed
            </p>
          </div>
        </el-col>

        <el-col :span="16">
          <div class="grid-content ep-bg-purple" style="width: 100%;">
            <el-input-number v-model="audioSeed" />
          </div>
        </el-col>
      </el-row>

      <!-- Text  Seed -->
      <el-row :gutter="24" style="margin-top:20px">
        <el-col :span="8">
          <div class="grid-content ep-bg-purple"></div>
          <div class="centered-container">
            <p style="margin: 0; text-align: left; margin-left: -30px;">
              <!-- 添加text-align属性 -->
              Text Seed
            </p>
          </div>
        </el-col>

        <el-col :span="16">
          <div class="grid-content ep-bg-purple" style="width: 100%;">
            <el-input-number v-model="textSeed" />
          </div>
        </el-col>
      </el-row>
    </div>

    <div>
      <div
        style="background-color: #683CFD;margin-top:40px"
        class="bg-zinc-200 h-10 flex items-center justify-center rounded text-sm text-gray-900 cursor-pointer"
        @click="getVoice"
      >
        <i style="color: white;" class="iconfont icon-shuaxin2_line mr-2" />
        <span style="color:white;">合成语音</span>
      </div>
    </div>
    <Loading v-show="loading" class="pl-60 bg-opacity-70" />
  </div>
</template>

<script setup lang="ts">
import Loading from "@/components/Loading.vue";
import { usePlayerState } from "@/stores/playerState";
import { useTrackState } from "@/stores/trackState";
import axios from "@/utils/http/request";
import { ElMessage } from "element-plus";

const selectedMenu = ref("recommend");
function onSelect(selected: { value: string }) {
  selectedMenu.value = selected.value;
}

const trackStore = useTrackState();
const playStore = usePlayerState();
const loading = ref(false);
const mytext = ref("");
const audioSeed = ref(42);
const textSeed = ref(42);
const top_K = ref(3.0);
const top_P = ref(0.1);
const temperature = ref(0.3);
function getVoice() {
  if (mytext.value === "" || mytext.value === null) {
    ElMessage({
      message: "文本不能为空！",
      type: "error"
    });
    return;
  }

  loading.value = true;
  let param = {
    text: [mytext.value],
    stream: false,
    lang: null,
    skip_refine_text: true,
    refine_text_only: false,
    use_decoder: true,
    audio_seed: audioSeed.value,
    text_seed: textSeed.value,
    do_text_normalization: true,
    do_homophone_replacement: false,
    params_refine_text: {
      prompt: "",
      top_P: 0.7,
      top_K: 20,
      temperature: 0.7,
      repetition_penalty: 1,
      max_new_token: 384,
      min_new_token: 0,
      show_tqdm: true,
      ensure_non_empty: true,
      stream_batch: 24
    },
    params_infer_code: {
      prompt: "[speed_5]",
      top_P: top_P.value,
      top_K: top_K.value,
      temperature: temperature.value,
      repetition_penalty: 1.05,
      max_new_token: 2048,
      min_new_token: 0,
      show_tqdm: true,
      ensure_non_empty: true,
      stream_batch: true,
      spk_emb: null
    }
  };
  axios
    .post("/api1/generate_voice", param, {
      headers: {
        "Content-Type": "application/json;charset=UTF-8"
      },
      responseType: "arraybuffer"
    })
    .then(response => {
      ElMessage({
        message: "生成语音成功！",
        type: "success"
      });
      console.log(response);
      var zipName = "voice"; // 下载的文件名
      let blob = new Blob([response.data], { type: "application/zip" }); // 下载格式为zip
      if ("download" in document.createElement("a")) {
        let elink = document.createElement("a"); // 创建一个<a>标签
        elink.style.display = "none"; // 隐藏标签
        elink.href = window.URL.createObjectURL(blob); // 配置href
        elink.download = zipName;
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 移除<a>标签
      } else {
        // IE10+
        // navigator.msSaveBlob(blob, zipName);
      }

      loading.value = false;
    })
    .catch(error => {
      console.error(error);
      loading.value = false;
    });
}
</script>

<style scoped>
.slider-demo-block {
  max-width: 600px;
}

.el-slider {
  margin-top: 20px;
}

.el-slider:first-child {
  margin-top: 0;
}
.centered-container {
  display: flex;
  align-items: left; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
</style>